let form = layui.form;

// 定义参数 把一个参数放到一个对象中，方便复用
const query = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, // 是	int	每页显示多少条数据
    cate_id: "", // "" 所有的文章分类 否	string	文章分类的 Id
    state: "", // "" 所有状态 文章状态  可选值有：已发布、草稿
};

render()
function render() {
    axios.get('/my/article/list', {
        // get方法，需要在配置对象中，通过params 来传递数据
        params: query
    }).then(({ data: { data, total } }) => {
        // console.log(res);
        const newStr = data.map(({ Id, cate_name, pub_date, state, title }) => `
            <tr>
                <td>${title}</td>
                <td>${cate_name}</td>
                <td>${pub_date}</td>
                <td>${state}</td>
                <td>
                  <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${Id}">编辑</button>
                  <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${Id}">删除</button>
                </td>
            </tr>
            `).join('')

        $('#list').html(newStr)

        // 处理分页
        renderPage(total)
    })
}


// 获取分类列表数据 ==> 填充到分类的下拉框中
axios.get('/my/article/cates').then(({ data: { data } }) => {
    // console.log(res);

    let newArr = data.map(({ Id, name }) => `<option value="${Id}">${name}</option>`).join('')
    // console.log(newArr);


    // 把option内容放到下拉框中 html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加(不会有覆盖问题)
    // $('#cateSelect').append(newArr)
    $('#cateSelect').html('<option value="">所有分类</option>' + newArr)

    // 渲染全部(layui方法)
    form.render()
})

// 实现筛选功能
// 给筛选注册submit事件
$('#form').on('submit', function (e) {
    e.preventDefault() //阻止默认行为

    // 获取下拉框表单值 + 修改query对象的数据
    // let cateSelect = $('#cateSelect').val()
    // let stateSelect = $('#stateSelect').val()

    // // 修改query对象的数据
    // query.cate_id = cateSelect
    // query.state = stateSelect

    // 获取下拉框表单值 + 修改query对象的数据
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()

    // 当筛选的时候，需要从第一个看起
    query.pagenum = 1

    // 发送axios获取对应的数据
    render()

})

// 分页函数
const laypage = layui.laypage
function renderPage(count) {
    laypage.render({
        elem: 'page-box', // 注意，这里的 page-box
        count,//数据总数，从服务端得到
        limit: query.pagesize, //每页显示的条数
        limits: [1, 2, 3, 5, 8, 10], //每页条数的选择项
        curr: query.pagenum, //起始值
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); //得到每页显示的条数

            // 修改query的pagenum的值
            query.pagenum = obj.curr

            // 修改query的pagesize的值
            query.pagesize = obj.limit

            // //首次不执行
            if (!first) {
                //do something 点击分页的时候 做啥
                render()
            }
        }
    });
}

// 删除功能
$('#list').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id') //读取自定义属性

    layer.confirm('确认删除此文章吗?', { icon: 3, title: '提示' },
        function (index) {
            //do something
            axios.get(`/my/article/delete/${id}`).then(({ data: { status, message } }) => {
                if (status !== 0) {
                    // 删除失败
                    return layer.msg(message)
                }

                // 解决删除的bug ==> 去加载上一页的数据
                // 当这一页的删除按钮的个数为一个的时候，表示这一条数据删除之后，这一页将没有了数据，就需要展示上一页
                // 页码最小值为1
                if ($('.btn_delete').length === 1) {
                    query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
                }

                // 删除成功
                layer.msg(message)

                // 关闭弹出层
                layer.close(index);

                // 重新获取所有文章列表数据
                render()
            })
        });
})

// 编辑功能
$('#list').on('click', '.btn_edit', function () {
    // 获取按钮id
    let id = $(this).attr('data-id')
    // 跳转页面
    location.href = '/article/art_edit.html?id=' + id
})